<template>
  <el-drawer
    :title="$t('message.ddxq')"
    :visible.sync="showOrder"
    size="1000px"
    :wrapper-closable="!modalDialog"
  >
    <div class="property-title">{{ $t('message.ddxq') }}</div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.zldh') }}：</span>
        <span class="value">{{ detail.id }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.zfzt') }}：</span>
        <span class="value">{{ detail.payStatus === "0" ? $t('message.dzf') : detail.payStatus === "1" ? $t('message.cswzf') : detail.payStatus === "2" ? $t('message.qxzf') : detail.payStatus === "3" ? $t('message.zfcg') : detail.payStatus === "4" ? $t('message.tkz') : detail.payStatus === "5" ? $t('message.tkcg') : "" }}
        </span>
      </div>
      <div v-if="detail.status">
        <span class="key">{{ $t('message.status') }}：</span>
        <span class="value"> {{ detail.status === "0" ? $t('message.zlz') :detail.status === "1" ? $t('message.ygh') : detail.status === "2" ? $t('message.dzf') :detail.status === "3" ? $t('message.qxzf'): "" }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.zlsj') }}：</span>
        <span class="value">{{ detail.leaseTime }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.ddje') }}：</span>
        <span class="value">{{ detail.orderPrice }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.zffs') }}：</span>
        <span class="value">{{ detail.payMethodName || '~' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.wcsj') }}：</span>
        <span class="value">{{ detail.backTime || '~' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.zlrlx') }}：</span>
        <span class="value">{{ detail.leaseUserType == 1 ? $t('message.hy'):$t('message.sk'), }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.ytk') }}：</span>
        <span class="value">{{ detail.backPrice || '~' }}</span>
      </div>
      <div v-if="detail.mixedPayMethod" class="item">
        <span class="key">{{ $t('message.hhzffs') }}：</span>
        <span class="value">{{ detail.mixedPayMethod || '-' }}</span>
      </div>
      <div v-if="detail.mixedPayMoney" class="item">
        <span class="key">{{ $t('message.hhzfje') }}：</span>
        <span class="value">{{ detail.mixedPayMoney || '-' }}</span>
      </div>
      <div v-if="detail.cardPayMoney" class="item">
        <span class="key">{{ $t('message.hhzfhykje') }}：</span>
        <span class="value">{{ detail.cardPayMoney || '-' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.bz') }}：</span>
        <span class="value">{{ detail.remark || '~' }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.kpqk') }}</div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.kpzt') }}：</span>
        <span class="value">{{ detail.invoiceStatus== '1'?$t('message.yk'):$t('message.wkq') }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.kpzt') }}：</span>
        <span class="value">{{ detail.invoiceTime || "~" }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.mjxx') }}</div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.name') }}：</span>
        <span class="value">{{ detail.leaseUserName }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.lxdh') }}：</span>
        <span class="value">{{ detail.leaseUserPhone || "~" }}</span>
      </div>
      <div v-if="detail.cardNo">
        <span class="key">{{ $t('message.hykh') }}：</span>
        <span class="value">{{ detail.cardNo || "~" }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.qczlxx') }}</div>
    <el-table
      ref="multipleTable"
      :data="detail.equipmentLeaseInfo"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.qcmc')"
        prop="equipmentName"
        show-overflow-tooltip
        min-width="120"
      />

      <el-table-column
        align="center"
        :label="$t('message.zfyj')"
        show-overflow-tooltip
        prop="realDeposit"
        min-width="80"
      />
      <el-table-column
        :label="$t('message.zlsj')"
        prop="leaseTime"
        min-width="160"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        :label="$t('message.mfsjfz')"
        prop="freeTime"
        show-overflow-tooltip
        min-width="110"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.freeTime || 0 }}
        </template></el-table-column>
      <el-table-column
        :label="$t('message.zlscfz')"
        prop="leaseTimeNum"
        show-overflow-tooltip
        min-width="110"
        align="center"
      />
      <el-table-column
        :label="$t('message.zlfy')"
        prop="leasePrice"
        show-overflow-tooltip
        min-width="80"
        align="center"
      />
      <el-table-column
        :label="$t('message.thyj')"
        prop="backDeposit"
        show-overflow-tooltip
        min-width="80"
        align="center"
      />
      <el-table-column
        :label="$t('message.sfbz')"
        prop="chargeInfo"
        show-overflow-tooltip
        min-width="140"
        align="center"
      />
      <el-table-column
        :label="$t('message.ghsj')"
        prop="backTime"
        min-width="160"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        :label="$t('message.zlczr')"
        prop="leaseHandleUserName"
        min-width="110"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        :label="$t('message.ghczr')"
        prop="backHandleUserName"
        min-width="110"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        :label="$t('message.bz')"
        prop="remark"
        min-width="120"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        :label="$t('message.status')"
        prop="status"
        min-width="80"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.status === "0" ? $t('message.zlz') :scope.row.status === "1" ? $t('message.ygh') : scope.row.status === "2" ? $t('message.dzf') :scope.row.status === "3" ? $t('message.qxzf'): "" }}
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom_wrap">
      <div class="line">
        <span>{{ $t('message.ddje') }}</span>
        <span>{{ detail.orderPrice }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
      <div v-if="detail.realPrice" class="line secondColor">
        <span>{{ $t('message.shk') }}：</span>
        <span>{{ detail.realPrice }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
    </div>
  </el-drawer>
  <!--</div> -->
</template>

<script>
import { equipmentLeaseDetail } from '@/api'
import store from '@/store'
export default {
  name: 'OrderDetail',
  data() {
    return {
      detail: {},
      modalDialog: store.getters.dialog,
      showOrder: false // 弹窗
    }
  },
  methods: {
    goBack() {
      this.$router.replace('/ticket/ticketOrder')
    },
    getOrderDetail(id) {
      equipmentLeaseDetail({ param: { id }}).then((res) => {
        if (res.errorCode === '000000') {
          this.showOrder = true
          this.detail = res.record
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
  color: #666666;
  display: inline-block;
  // width: 90px;
  // text-align: right;
}
.value {
  color: #222;
}
  }
}
.bottom_wrap {
  margin-top: 30px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
